<template>
	<view>
		<u-navbar
			:title="title"
			title-color="#FFF"
			:background="navBackground"
			:is-fixed="true"
			:border-bottom="false"
			:is-back="true"
			back-icon-color="#FFF"
			v-if="showNav"
		></u-navbar>
		<view class="list d-flex-jsb w-100 bor-box flex-wrap">
			<view class="item w-100 d-flex-center radius-10" @click="$tools.goPage(t.path)" v-for="(t, i) in list" :key="i">
				<text>{{ t.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 是否显示自定义nav
		showNav: {
			type: Boolean,
			default: true
		},
		// 自定义nav标题
		title: {
			type: String,
			default: ''
		},
		// 传入的列表数据
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			//自定义nav颜色
			navBackground: this.$navBackground
		};
	}
};
</script>

<style lang="scss">
.list {
	padding: 20rpx 32rpx;
	.item {
		width: 48%;
		height: 200rpx;
		color: #ffffff;
		font-weight: bold;
		margin-bottom: 20rpx;
		&:nth-child(1) {
			background: $tian-color-mangoyellow;
		}
		&:nth-child(2) {
			background: $tian-color-lotuscolor;
		}
		&:nth-child(3) {
			background: $tian-color-greenblue;
		}
		&:nth-child(4) {
			background: $tian-color-grayblue;
		}
		&:nth-child(5) {
			background: $tian-color-pink;
		}
	}
}
</style>
